<template>
  <div class="dynamic-page">
    <div class="dynamic-bgc" v-if="show" v-loading="loading">
      <img :src="$store.state.baseUrl+bgcImg" alt="" />
    </div>
    <div class="nav">
      <ul>
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: $route.path == item.path }"
          @click="navChange(item.path)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <router-view class="router-page"></router-view>
  </div>
</template>
<script>
import api from "@/api/modules/home.js";
export default {
  data() {
    return {
      show: true,
      loading: true,
      bgcImg: "",
      navList: [
        {
          name: "投融服务",
          path: "/service/invest",
        },
        {
          name: "赋能服务",
          path: "/service/energize",
        },
        {
          name: "招商推介",
          path: "/service/attract",
        },
      ],
    };
  },
  mounted() {
    // 获取轮播图
    api.getCarouselList().then((res) => {
      if (res.data && res.data.length) {
        res.data.forEach((el) => {
          if (el.moduleType == 3) {
            this.bgcImg=el.carouselFile
            if(!this.bgcImg){
              this.show=false
            }
          }
        });
      }
      this.loading=false
    });
  },
  methods: {
    navChange(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style lang="less">
.dynamic-page {
  box-sizing: border-box;

  .dynamic-bgc {
    img {
      height: 160px;
      width: 100%;
    }
    margin-bottom: 30px;
  }
  .nav {
    padding: 0 260px;
    font-size: 1.3rem;
    ul {
      border-bottom: 1px solid #e8f2fd;
      display: flex;
      height: 80px;
      justify-content: center;
      align-items: center;
      text-align: center;
      li {
        // margin-right: 40px;
        height: 100%;
        line-height: 36px;
        cursor: pointer;
        width: 200px;
        height: 36px;
      }
      .active {
        background-color: #0b4e9e;
        color: #fff;
      }
    }
  }
}
</style>
